<template>
  <el-drawer append-to-body v-model="drawer" direction="rtl" size="61%">
    <el-card class="spu-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>物料编辑</span>
        </div>
      </template>

      <el-form ref="edit" :model="spuEdit" :rules="editRules" class="detail-form" label-position="right"
        label-width="100px">
        <el-form-item label="物料编号" prop="spuNo">
          <el-input v-model="spuEdit.spuNo" disabled />
        </el-form-item>
        <el-form-item label="物料名称" prop="spuName">
          <el-input v-model="spuEdit.spuName" />
        </el-form-item>
        <el-form-item label="物料类型" prop="spuType">
          <el-input v-model="spuEdit.spuType" />
        </el-form-item>
        <el-form-item label="物料规格" prop="spuSpec">
          <el-input v-model="spuEdit.spuSpec" />
        </el-form-item>
        <el-form-item label="计量单位" prop="spuUnit">
          <el-input v-model="spuEdit.spuUnit" />
        </el-form-item>
        <el-form-item label="状态" prop="contNo">
          <el-input v-model="spuEdit.spuStatus" />
        </el-form-item>

        <el-form-item label="所属仓库" prop="warehouseId">
          <el-select v-model="spuEdit.warehouseId" placeholder="请选择所属仓库" clearable>
            <el-option v-for="item in warehouseOptions" :key="item.warehouseId" :label="item.warehouseName"
              :value="item.warehouseId">
              <span style="float: left">{{ item.warehouseNo }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.warehouseName }}</span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="所属库区" prop="zoneId">
          <el-select v-model="spuEdit.zoneId" placeholder="请选择所属库区" clearable>
            <el-option v-for="item in filteredZoneOptions" :key="item.zoneId" :label="item.zoneName"
              :value="item.zoneId">
              <span style="float: left">{{ item.zoneNo }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.zoneName }}</span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备注信息" prop="comments">
          <el-input v-model="spuEdit.comments" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="confirm">确认</el-button>
          <el-button type="danger" @click="close">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </el-drawer>
</template>


<script setup name="SpuEdit">
import { getSpu, addSpu, updateSpu } from "@/api/wms/spu";
import { listZone } from "@/api/wms/zone";
import { listWarehouse } from "@/api/wms/warehouse";
import { reactive, ref, onMounted } from 'vue';

const refresh = () => { emit('refresh') }
const emit = defineEmits(['refresh'])
let drawer = defineModel()

let edit = ref()
const props = defineProps({
  spuDetails: {
    type: Object,
    default: () => { }
  }
})

const { proxy } = getCurrentInstance();

const spuEdit = ref({
  spuId: null,
  spuNo: null,
  spuName: null,
  spuType: null,
  spuSpec: null,
  spuUnit: null,
  spuStatus: null,
  werks: null,
  warehouseId: null,
  zoneId: null,
  comments: null
});

// 库区与包装信息的选项卡
const warehouseOptions = ref([]);
const zoneOptions = ref([]);
const filteredZoneOptions = ref([]); // 过滤后的库区选项
const packOptions = ref([]);

const warehouseParams = reactive({
  warehouseId: null,
  warehouseNo: null,
  warehouseType: null,
  warehouseStatus: 0,
});

// 库区参数
const zoneParams = reactive({
  zoneId: null,
  zoneNo: null,
  zoneType: 'A',
  warehouseId: null,
  zoneStatus: 0,
});

const editRules = {
  spuNo: [
    { required: true, message: "物料编号不能为空", trigger: "blur" },
  ],
  warehouseId: [
    { required: true, message: "所属仓库不能为空", trigger: "blur" },
  ],
  zoneId: [
    { required: true, message: "所属库区不能为空", trigger: "blur" },
  ],
}
// 计算属性-根据选择的仓库过滤库区
const availableZones = computed(() => {
  if (!spuEdit.value.warehouseId) return zoneOptions.value;
  return zoneOptions.value.filter(zone => zone.warehouseId === spuEdit.value.warehouseId);
});

// 监听仓库变化，更新库区选项
watch(() => spuEdit.value.warehouseId, (newWarehouseId) => {
  if (newWarehouseId) {
    filteredZoneOptions.value = zoneOptions.value.filter(zone => zone.warehouseId === newWarehouseId);
    // 如果当前选择的库区不属于新选的仓库，清空库区选择
    if (spuEdit.value.zoneId) {
      const currentZone = zoneOptions.value.find(zone => zone.zoneId === spuEdit.value.zoneId);
      if (!currentZone || currentZone.warehouseId !== newWarehouseId) {
        spuEdit.value.zoneId = null;
      }
    }
  } else {
    filteredZoneOptions.value = zoneOptions.value;
  }
});

// 根据spuId获取数据
function getSpuInfo() {
  getSpu(props.spuDetails.spuId).then((response) => {
    spuEdit.value = response.data;
    console.log('根据spuId获取数据', response.data)
  }).catch(error => { });
}

// 获取仓库列表
function getWarehouseList() {
  listWarehouse(warehouseParams).then(response => {
    warehouseOptions.value = response.rows;
  }).catch(error => { });
}

// 获取库区列表
function getZoneList() {
  listZone(zoneParams).then(response => {
    zoneOptions.value = response.rows;
    filteredZoneOptions.value = response.rows;
  }).catch(error => { });
}

const confirm = () => {
  console.log('确认修改物料信息')
  updateSpu(spuEdit.value).then(() => {
    proxy.$modal.msgSuccess("修改成功");
    refresh();
    drawer.value = false
  }).catch(() => { });
}

const close = () => {
  console.log('取消修改物料信息')
  drawer.value = false
}

getSpuInfo();
getWarehouseList();
getZoneList();
</script>
